.form-group {
  > label {
    margin-bottom: 0.25rem;
    line-height: 1.3;
    display: block;

    &.-inline {
      margin-bottom: 0;
    }

    .icon-info {
      margin-left: 2px;
      opacity: 0.5;
      transition: opacity 0.2s $ease-out-expo;
      cursor: help;
      vertical-align: bottom;

      &:hover {
        opacity: 1;
      }
    }
  }

  .checkbox-control {
    margin-bottom: 0;
  }
}

.input-file {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.form-control {
  background: 0;
  min-width: 0;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.25;
  margin: 0;
  border: 1px solid var(--theme-background-200);
  border-radius: 4px;
  padding: 0.375rem;
  box-sizing: border-box;
  color: var(--theme-color-base);

  &.btn {
    border: 1px solid var(--theme-background-200);
  }

  &.-code {
    font-family: $font-monospace;
    line-height: 1.4;
    height: auto;
    width: 100%;
    max-width: 100%;
    flex-grow: 1;
    padding: 1rem;
    background-color: var(--theme-color-o10);
    border-color: rgba(black, 0.25);
    border-radius: 4px;
    font-size: 12px;

    &:focus {
      border-color: var(--theme-buy-base);
    }
  }
}

.help-text {
  line-height: 1.3;

  a {
    text-decoration: underline;
  }

  i[class^='icon-'] {
    vertical-align: text-bottom;
  }

  i[class^='exchanges-'] {
    vertical-align: text-bottom;
  }
}

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: var(--theme-background-300);
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: var(--theme-background-300);
  opacity: 1;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: var(--theme-background-300);
  opacity: 1;
}
:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--theme-background-300);
}
::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--theme-background-300);
}

::placeholder {
  /* Most modern browsers support this now. */
  color: var(--theme-background-300);
}

.input-group {
  position: relative;

  > .form-control {
    width: 100%;
  }

  > .btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.25rem;
    justify-content: center;
  }
}

.checkbox-control {
  display: flex !important;
  align-items: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  margin-right: auto;

  &.-rip input ~ div {
    &:before,
    &:after {
      content: $icon-skull;
    }
  }

  &.-aggr input ~ div {
    &:before {
      content: $icon-ms;
    }

    &:after {
      content: $icon-cross;
    }
  }

  &.-sort input ~ div {
    &:before {
      content: $icon-up;
    }

    &:after {
      content: $icon-down;
      transform: none;
    }
  }

  &.-auto input {
    ~ div {
      width: auto;
      min-width: 1rem;
      display: flex;

      &:before,
      &:after {
        font-family: inherit;
        position: relative;
        line-height: 1;
        transform: none;
      }

      i {
        order: 1;
        top: 0;
      }

      &:before {
        content: attr(on);
        display: none;
      }

      &:after {
        content: attr(off);
      }
    }

    &:checked ~ div {
      &:before {
        display: block;
      }

      &:after {
        display: none;
      }
    }
  }

  input {
    display: none;

    &:checked {
      ~ div {
        background-color: var(--theme-buy-50);
        border-color: var(--theme-buy-100);
        color: var(--theme-buy-color);

        &:before,
        &:after {
          transition: all 0.5s $ease-out-expo;
        }

        &:before {
          opacity: 1;
          transform: none;
        }

        &:after {
          opacity: 0;
          transform: translateY(50%) skewY(20deg);
        }
      }

      ~ span {
        color: var(--theme-color-base);
      }
    }

    &:disabled ~ div {
      opacity: 0.5;
      pointer-events: none;
      cursor: not-allowed;
    }
  }

  &.-large {
    > div {
      font-size: 1.375rem;
    }
  }

  &.-small {
    > div {
      padding: 0.25rem;
    }
  }

  &.-extra-small {
    > div {
      padding: 0.125rem;

      &:before {
        font-size: 0.75rem;
      }
    }
  }

  > div {
    padding: 0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
    border: 1px solid var(--theme-background-200);
    background-color: var(--theme-background-150);
    transition: all 0.2s $ease-out-expo;
    position: relative;
    flex-shrink: 0;
    color: var(--theme-color-100);

    &:before,
    &:after {
      font-family: 'icon';
      font-size: 1rem;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      transform: translateY(-50%) skewY(-20deg);
      opacity: 0;
      transition: all 0.2s $ease-out-expo;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
      pointer-events: none;
    }

    &:not([class^='icon-']):before {
      content: $icon-check;
    }

    &:after {
      opacity: 1;
    }

    span {
      line-height: 1;

      > i {
        vertical-align: text-bottom;
      }
    }
  }

  > span {
    line-height: 1;
  }

  div + span {
    margin-left: 0.5rem;
  }

  span + div {
    margin-left: 0.5rem;
  }
}

[contenteditable] {
  display: inline-block;
  cursor: text;
  font-family: $font-monospace;
  color: var(--theme-color-base);
  font-size: 0.875rem;
  padding: 0.5rem;
  line-height: 1rem;
  -webkit-touch-callout: none;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;

  &:empty:before {
    content: attr(placeholder);
    color: var(--theme-background-300);
  }

  &[disabled] {
    color: inherit;
    cursor: inherit;
  }
}

.form-feedback {
  color: lighten($red, 10%);
}
